<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>个人中心</title>
    <link href="https://cdn.jsdelivr.net/npm/tailwindcss@2.2.19/dist/tailwind.min.css" rel="stylesheet">
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <link rel="stylesheet" href="assets/common.css">
    <style>
        .profile-header {
            background: linear-gradient(135deg, #fd79a8 0%, #e84393 100%);
            padding: 30px 16px 50px;
            color: white;
            position: relative;
            overflow: hidden;
        }
        .profile-header::after {
            content: "";
            position: absolute;
            width: 200px;
            height: 200px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            right: -50px;
            top: -100px;
        }
        .profile-header::before {
            content: "";
            position: absolute;
            width: 120px;
            height: 120px;
            background-color: rgba(255, 255, 255, 0.1);
            border-radius: 50%;
            left: -30px;
            bottom: -50px;
        }
        .menu-item {
            display: flex;
            align-items: center;
            padding: 16px;
            background-color: white;
            margin-bottom: 1px;
        }
        .menu-item i {
            margin-right: 15px;
            font-size: 18px;
            color: #666;
            width: 20px;
            text-align: center;
        }
        .menu-item .arrow {
            margin-left: auto;
            color: #ccc;
        }
        .profile-avatar {
            width: 70px;
            height: 70px;
            border-radius: 50%;
            background-color: white;
            display: flex;
            align-items: center;
            justify-content: center;
            color: #fd79a8;
            font-size: 30px;
            border: 3px solid rgba(255, 255, 255, 0.3);
        }
        .menu-section {
            margin-bottom: 10px;
            background-color: white;
            border-radius: 8px;
            overflow: hidden;
        }
    </style>
</head>
<body>
    <div class="wechat-container">
        <!-- Profile Header -->
        <div class="profile-header">
            <div class="flex items-center">
                <div class="profile-avatar">
                    <i class="fas fa-user"></i>
                </div>
                <div class="ml-4">
                    <div class="text-lg font-bold">张三</div>
                    <div class="text-sm opacity-80 mt-1">138****6666</div>
                </div>
                <div class="ml-auto">
                    <button class="bg-white bg-opacity-20 text-white rounded-full px-3 py-1 text-sm">
                        编辑资料
                    </button>
                </div>
            </div>
        </div>
        
        <div class="wechat-content" style="padding-top: 0;">
            <!-- Stats Overview -->
            <div class="bg-white -mt-4 rounded-t-lg shadow-sm flex text-center py-4">
                <div class="flex-1 border-r border-gray-100">
                    <div class="font-bold text-lg">5</div>
                    <div class="text-sm text-gray">订单</div>
                </div>
                <div class="flex-1 border-r border-gray-100">
                    <div class="font-bold text-lg">2</div>
                    <div class="text-sm text-gray">收藏</div>
                </div>
                <div class="flex-1">
                    <div class="font-bold text-lg">87</div>
                    <div class="text-sm text-gray">照片</div>
                </div>
            </div>
            
            <!-- My Services -->
            <h3 class="font-bold text-gray-600 mt-6 mb-2 px-4">我的服务</h3>
            <div class="menu-section">
                <div class="menu-item">
                    <i class="fas fa-camera-retro text-pink"></i>
                    <div>我的订单</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-heart text-pink"></i>
                    <div>我的收藏</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-images text-pink"></i>
                    <div>我的相册</div>
                    <div class="badge bg-red-500 text-white rounded-full text-xs px-2 py-0.5 mr-2">
                        3
                    </div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-wallet text-pink"></i>
                    <div>钱包</div>
                    <div class="text-sm text-gray mr-2">余额: ¥50</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            
            <!-- Settings -->
            <h3 class="font-bold text-gray-600 mt-6 mb-2 px-4">设置</h3>
            <div class="menu-section">
                <div class="menu-item">
                    <i class="fas fa-bell"></i>
                    <div>通知设置</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-shield-alt"></i>
                    <div>隐私设置</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-question-circle"></i>
                    <div>帮助与反馈</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-cog"></i>
                    <div>通用设置</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            
            <!-- Other -->
            <h3 class="font-bold text-gray-600 mt-6 mb-2 px-4">其他</h3>
            <div class="menu-section">
                <div class="menu-item">
                    <i class="fas fa-info-circle"></i>
                    <div>关于我们</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
                <div class="menu-item">
                    <i class="fas fa-sign-out-alt"></i>
                    <div>退出登录</div>
                    <div class="arrow">
                        <i class="fas fa-chevron-right"></i>
                    </div>
                </div>
            </div>
            
            <div class="text-center text-sm text-gray mt-8 mb-20">
                <p>版本 v1.0.0</p>
                <p class="mt-1">© 2024 漫展摄影接单小程序</p>
            </div>
        </div>
        
        <!-- Footer Navigation -->
        <div class="wechat-footer">
            <div class="wechat-tab">
                <i class="fas fa-camera"></i>
                <span>摄影师</span>
            </div>
            <div class="wechat-tab">
                <i class="fas fa-list-alt"></i>
                <span>我的订单</span>
            </div>
            <div class="wechat-tab active">
                <i class="fas fa-user"></i>
                <span>我的</span>
            </div>
        </div>
    </div>
</body>
</html> 